<template>
  <div class="offLineMain">
    <div class="top">
      <ul class="items-wrapper">
        <li class="item">
          <div class="left">还款金额</div>
          <div class="right"><input type="text" class="data-input" placeholder="在此处填写您的还款金额"></div>
        </li>
        <li class="item">
          <div class="left">还款日期</div>
          <div class="right">621451 1965 0907 1541</div>
        </li>
        <li class="item">
          <div class="left">剩余还款金额</div>
          <div class="right">5618 1241 3151 1256</div>
        </li>
      </ul>
    </div>
    <div class="center">
      <div class="title">请上传您线下还款的转账截图凭证</div>
      <div class="content">
        <div class="img-wrapper">
        </div>
      </div>
    </div>
    <div class="bottom">
      <button class="btn">点击还款</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "offLineMain"
  }
</script>

<style scoped lang="stylus">
  .offLineMain
    height calc(100% - 64px)
    padding 10px
    background #f6f6f6
    .top
      height 134px
      background #ffffff
      border-radius 6px
      .items-wrapper
        .item
          display flex
          height 44px
          line-height 44px
          border-bottom 1px solid #e7e7e7
          color #737373
          font-size 14px
          &:last-child
            border-bottom none
          .left
            flex 0 0 120px
            text-align left
            padding-left 10px
          .right
            flex 1
            text-align right
            padding-right 10px
            color #333333
            .data-input
              height 100%
              width 100%
              outline none
              text-align right
              color #333333
              &::placeholder
                color #9F9F9F
    .center
      height 166px
      background #ffffff
      margin-top 10px
      border-radius 6px
      .title
        height 44px
        line-height 44px
        padding-left 10px
        text-align left
        color #737373
        font-size 14px
      .content
        height 122px
        text-align center
        .img-wrapper
          height 110px
          width 212px
          background #D2D2D2 url("upload@2x.png")no-repeat center/60px
          margin 0 auto
          p
            padding-top 64px
            color #49A2FE
            font-size 10px
    .bottom
      padding-top 100px
      .btn
        width 100%
        height 44px
        border none
        background #49A2FE
        color #ffffff
        font-size 17px
        border-radius 6px
        outline none
</style>
